<template>
  <div class="PlanManagement">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EmergencyPlan' }">应急预案</el-breadcrumb-item>
        <el-breadcrumb-item>预案管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData" :labelWidth="'160px'"
        @node-click="deptChoose">
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" :paginationAtrrs="paginationAtrrs"
        @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close" ref="yanpan_dialog">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <el-form slot="slot1" ref="formComponent" :model="add_form" label-width="150px" size="small" :rules="add_rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="应急预案：" prop="serialName">
                <el-input v-model="add_form.serialName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预案编号：" prop="serialNum">
                <el-input v-model="add_form.serialNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="item.label + '：'" v-for="(item, index) in formList" :key="index" :prop="item.id"
                :rules="add_rules.structureId">
                <LsdForm :compData="item" :form="add_form" @node-click="handleSelectTree(arguments, item)" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="item.label + '：'" v-for="(item, index) in formList1" :key="index" :prop="item.id"
                :rules="add_rules.typeId">
                <LsdForm :compData="item" :form="add_form" @node-click="handleSelectTree(arguments, item)" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <DialogForm ref="formComponent9" :formConfig="formConfig9" />
            </el-col>
            <el-col :span="12">
              <DialogForm ref="formComponent8" :formConfig="formConfig8" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="批准人：" prop="approver">
                <el-select v-model="add_form.approver" placeholder="请选择">
                  <el-option v-for="item in person_options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发布(修订)时间：" prop="releaseTime">
                <el-date-picker v-model="add_form.releaseTime" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="附件：" prop="fuJian">
                <el-upload class="upload" action="" :on-preview="handlePreview" :before-upload="handleBeforeUpload"
                  :on-remove="handleRemove" :limit="1" :file-list="upload_form.fileList" ref="upload"
                  accept="application/pdf,application/msword">
                  <el-button size="mini" plain style="color: #3270ff">上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    支持pdf/doc等文件，且不超过50mb
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form slot="slot2" ref="formComponent1" :model="adds_form" label-width="150px" :rules="add_rules">
          <el-row>
            <el-col :span="8">
              <el-form-item label="审批材料：" prop="fuJian1">
                <el-upload class="upload" :http-request="upload_form.httpRequest" action="" :on-preview="handlePreview"
                  :before-upload="handleBeforeUpload1" :on-remove="handleRemove1" :limit="1"
                  :file-list="upload_form.fileList1" ref="upload" accept="application/pdf,application/msword">
                  <el-button size="mini" plain style="color: #3270ff">上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    支持pdf/doc等文件，且不超过50mb
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="备案信息：" prop="fuJian2" style="margin-top:40px">
                <el-upload class="upload" :http-request="upload_form.httpRequest" action="" :on-preview="handlePreview"
                  :before-upload="handleBeforeUpload2" :on-remove="handleRemove2" :limit="1"
                  :file-list="upload_form.fileList2" ref="upload" accept="application/pdf,application/msword">
                  <el-button size="mini" plain style="color: #3270ff">上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    支持pdf/doc等文件，且不超过50mb
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <DialogForm ref="formComponent2" slot="slot3" :formConfig="formConfig3" />
      </LsdDialogTitle>
    </LsdDialog>

  </div>
</template>

<script>
import { getListApi, onExportApi, saveApi, delApi, editApi, getByIdApi, getStatisticsApis } from "@/api/EmengercyPlan/yagl";
import { formData, planSystem_type_tree, planType_type_tree } from "./config";

import { GetOrgTree, listAccountByOrganization, UploadFile, loadFile, getSuperiorUntilId, getOrggetSameLevel } from "@/api/common.js";
import common from "@/utils/common.js";
import { showTime } from "@/lib";

export default {
  name: "PlanManagement",
  data() {
    const validateFile = (rule, value, callback) => {
      if (this.upload_form.fileList.length < 1) {
        callback(new Error("请上传文件"));
      } else {
        callback();
      }
    };
    const validateFiles = (rule, value, callback) => {
      if (this.upload_form.fileList1.length < 1) {
        callback(new Error("请上传审批材料"));
      } else {
        callback();
      }
    };
    return {
      type: 0, // 区分编辑和新增,0新增，1编辑
      form: {
        serialName: "",
        serialNum: "",
        structureId: "",
        typeId: "",
        preplanDepartmentName: "",
        releaseUnitName: "",
        releaseTime: "",
        remind: ""
      },
      formData,
      // 表格信息
      table: {
        isSelectFlag: true, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "应急预案列表",
        actions: [
          {
            id: "dialogVisible",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "onExport",
            text: "导出",
            type: "",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "serialName",
            label: "预案名称",
            align: "left",
            "min-width": "200px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.toYuAnDetail(row.id);
                          }
                        }
                      }}
                    >
                      {row.serialName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "serialNum",
            label: "预案编号",
            align: "left",
            "min-width": "100px"
          },
          {
            prop: "structureId",
            label: "预案体系",
            align: "center"
          },
          {
            prop: "typeId",
            label: "预案类型",
            align: "center"
          },
          {
            prop: "preplanDepartmentName",
            label: "编制部门",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "releaseUnitName",
            label: "发布单位",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "releaseTime",
            label: "发布(修订)时间",
            align: "center",
            "min-width": "110px"
          },
          {
            prop: "remindStr",
            label: "更新提醒",
            align: "center",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#FF0606'>{row.remindStr === "超期提醒" ? "超期提醒" : ""}</span>
                  }
                  {
                    <span style='color:#F9E50E'>{row.remindStr === "更新提醒" ? "更新提醒" : ""}</span>
                  }
                  {
                    <span >{row.remindStr === "正常" ? "正常" : ""}</span>
                  }
                </div>
              );
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "110px",
            render: (h, scope) => {
              let arr = ["预览"];
              // const tbPower = this.common.isHasPower("tbr");
              if (["system"].includes(JSON.parse(sessionStorage.getItem("role")).roleCode)) {
                arr = ["预览", "编辑", "删除"];
              }
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": false,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      // 弹窗信息
      dialogConfig: {
        title: "预案录入",
        isShow: false, // 弹窗显示隐藏
        btnList: [
          {
            name: "发布",
            id: "saveBtn", // 事件名
            size: "small",
            type: "primary"
          },
          {
            name: "取消",
            id: "cancelBtn",
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "审批信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "创建信息",
          name: "3",
          slot: "slot3"
        }
      ],
      activeNames: ["1", "2", "3"], // 折叠面板默认展开列

      // 审批信息弹窗表单
      /* formConfig2: {
        formData: [
          {
            type: "upload",
            label: "审批材料",
            prop: "spcl",
            class: "sjgy",
            action: "#",
            limit: 1,
            httpRequest: () => { },
            lableWidth: "150px"
          },
          {
            type: "upload",
            label: "备案信息",
            prop: "baxx",
            class: "sjgy",
            action: "#",
            limit: 1,
            httpRequest: () => { },
            lableWidth: "150px"
          }
        ]
      }, */
      // 创建信息弹窗表单
      formConfig3: {
        formData: [
          {
            type: "input",
            label: "创建人",
            prop: "creator",
            isDisabled: true,
            // class: "third",
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "单位及部门",
            // class: "third",
            isDisabled: true,
            prop: "createDeptName",
            lableWidth: "104px"
          },
          {
            type: "input",
            label: "填报时间",
            class: "third",
            isDisabled: true,
            prop: "createTime",
            lableWidth: "130px"
          }
        ]
      },
      formConfig8: {
        formData: [{
          type: "selectTree",
          label: "发布单位",
          prop: "releaseUnitName",
          name: "releaseUnitId",
          title: "发布单位",
          choose: false,
          multiple: false,
          keyWord: "keyWord",
          treeRef: "treeRef",
          commonClick: true,
          clickClose: true,
          ref: "tree_select",
          lableWidth: "150px",
          option: [],
          treeData: {
            data: [],
            default: ["1"],
            checked: [],
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        }],
        rules: {
          releaseUnitName: [
            { required: true, message: "请选择发布单位", trigger: "change" }
          ]
        }
      },
      formConfig9: {
        formData: [{
          type: "selectTree",
          label: "编制部门",
          prop: "preplanDepartmentName",
          name: "preplanDepartmentId",
          title: "编制部门",
          choose: false,
          multiple: false,
          keyWord: "keyWord",
          treeRef: "treeRef",
          commonClick: true,
          isSplice: true,
          chooseUnit: true,
          clickClose: true,
          ref: "tree_select",
          lableWidth: "150px",
          option: [],
          treeData: {
            data: [],
            default: ["1"],
            checked: [],
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        }],
        rules: {
          releaseUnitName: [
            { required: true, message: "请选择发布单位", trigger: "change" }
          ]
        }
      },
      fid: "",
      FilledBy: {},
      add_form: {
        serialName: "",
        serialNum: "",
        structureId: "",
        typeId: "",
        preplanDepartmentName: "",
        releaseUnitName: "",
        approver: "",
        releaseTime: ""
      },
      adds_form: {
        // fuJian1: ""
      },
      checked: true,
      planSystem_type_tree,
      planType_type_tree,
      add_rules: {
        serialName: [
          { required: true, message: "请输入应急预案", trigger: "blur" }
        ],
        serialNum: [
          { required: true, message: "请输入应急预案", trigger: "blur" }
        ],
        structureId: [
          { required: true, message: "请选择预案体系", trigger: "change" }
        ],
        typeId: [
          { required: true, message: "请选择预案类型", trigger: "change" }
        ],
        // preplanDepartmentName: [
        //   { required: true, message: "请选择编制部门", trigger: "change" }
        // ],
        // releaseUnitName: [
        //   { required: true, message: "请选择发布单位", trigger: "change" }
        // ],
        // approver: [
        //   { required: true, message: "请选择批准人", trigger: "change" }
        // ],
        releaseTime: [
          { required: true, message: "请选择发布(修订)时间", trigger: "change" }
        ],
        fuJian: [
          { required: true, validator: validateFile, trigger: "change" }
        ],
        fuJian1: [
          { required: true, validator: validateFiles, trigger: "change" }
        ]
      },

      unit_options: [],
      dept_options: [],
      person_options: [],
      spcl: "",
      baxx: "",
      upload_form: {
        fileList: [],
        fileList1: [],
        fileList2: []
      },
      ids: [],
      allIds: [],

      formList: [
        {
          elType: "lsdTree",
          id: "structureId",
          label: "预案体系",
          treeRef: "treeRef",
          keyWord: "keyWord",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true,
            disabled: false
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: planSystem_type_tree[0].children
            },
            props: {
              children: "children",
              label: "label"
            }
          }
        }
      ],
      formList1: [
        {
          elType: "lsdTree",
          id: "typeId",
          label: "预案类型",
          treeRef: "treeRef",
          keyWord: "keyWords",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true,
            disabled: false
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: planType_type_tree
            },
            props: {
              children: "children",
              label: "label"
            }
          }
        }
      ]
    };
  },
  created() {
    this.list();
    this.getOrg();
    this.getPlanDep();
    this.GetOrgTreeData();
  },
  watch: {
    "upload_form.fileList": {
      handler(val) {
        this.$refs["formComponent"].validateField("fuJian");
      }
    },
    "upload_form.fileList1": {
      handler(val) {
        this.$refs["formComponent1"].validateField("fuJian1");
      }
    }
  },
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        // creatorDeptId: (org && JSON.parse(org).id) || "",
        unitName: (org && JSON.parse(org).unitName) || "",
        orgId: (org && JSON.parse(org).orgId) || ""
      };
      return creator;
    }
  },
  methods: {
    handleSelectTree(val, item) {
      console.log(val, item);
      if (item.id == "structureId") {
        if (!val[0].children) {
          this.$set(this.add_form, "structureId", val[0].label);
        }
      } else if (item.id == "typeId") {
        this.$set(this.add_form, "typeId", val[0].label);
      }
      console.log(this.add_form, "this.add_form");
    },
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.HanEdit(scope.row.id);
      } else if (item === "删除") {
        this.onDelPlan(scope.row.id);
      } else if (item === "预览") {
        this.preview(scope.row.id);
      }
    },
    handleNodeClick(data) {
      // console.log(data.label);
      if (data.label === "总体应急预案") {
        console.log("点击树");
      }
    },
    /* 获取组织机构 */
    async getOrg() {
      const unit = await GetOrgTree();
      /* 发布单位 */
      this.formData[5].treeData.attrs.data = unit;
      const dept = JSON.parse(JSON.stringify(unit));
      this.formData[4].treeData.attrs.data = dept;

    },
    // 树状选择
    deptChoose(val, item) {
      console.log("item", item);
      if (item.label == "编制部门") {
        this.$set(this.form, "preplanDepartmentName", val[0].orgName);
        this.$set(this.form, "preplanDepartmentId", val[0].orgCode);
      } else if (item.label == "发布单位") {
        this.$set(this.form, "releaseUnitName", val[0].orgName);
        this.$set(this.form, "releaseUnit", val[0].orgCode);
      } else if (item.label == "预案体系") {
        this.$set(this.form, "structureId", val[0].label);
      } else if (item.label == "预案类型") {
        this.$set(this.form, "typeId", val[0].label);
      }
    },
    async GetOrgTreeData() {
      const nowOrgId = JSON.parse(sessionStorage.getItem("org")).orgId;
      const { id } = await getSuperiorUntilId(nowOrgId);
      if (id) {
        getOrggetSameLevel({ orgId: id }).then(res => {
          this.formConfig9.formData[0].treeData.data = res;
          this.formConfig8.formData[0].treeData.data = res;
        });
      }
    },
    getPlanDep() {
      listAccountByOrganization({ orgId: this.getCreator.orgId }).then(res => {
        const newArr = [];
        res.forEach(i => {
          newArr.push({
            label: i.realName,
            value: i.realName
          });
        });
        this.person_options = newArr;
      });
      console.log("o-9ub c", this.planType_type_tree);
      this.formData[2].treeData.attrs.data = this.planSystem_type_tree[0].children;
      this.formData[3].treeData.attrs.data = this.planType_type_tree;
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.form.judgeState = this.status;
      this.list();
    },
    // 检索
    async query() {
      this.list();
    },
    // 列表
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        serialName: this.form.serialName,
        serialNum: this.form.serialNum,
        structureId: this.form.structureId,
        typeId: this.form.typeId,
        preplanDepartmentName: this.form.preplanDepartmentName,
        releaseUnitName: this.form.releaseUnitName,
        remind: this.form.remind,
        releaseStartTime: this.form.releaseStartTime ? this.form.releaseStartTime[0] : "", // 发布修订开始时间
        releaseEndTime: this.form.releaseStartTime ? this.form.releaseStartTime[1] : "" // 发布修订结束时间
      };
      const res = await getListApi(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
      const id = res.data.map((item) => {
        return item.id;
      });
      this.allIds = id;
    },
    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      const id = this.multipleSelection.map((item) => {
        return item.id;
      });
      this.ids = id;
      console.log("ids", this.ids);
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    // 弹窗按钮点击事件 对应id绑定事件
    handleBtn(item) {
      this[item.id]();
    },
    // 新增操作
    dialogVisible() {
      this.dialogConfig.isShow = true;
      this.type = 0;
      this.$nextTick(() => {
        console.log("formComponent2", this.$refs.formComponent2.form);
        this.$set(this.$refs.formComponent2.form, "creator", this.getCreator.name);
        this.$set(this.$refs.formComponent2.form, "createDeptName", sessionStorage.getItem("dwbmName"));
        this.$set(this.$refs.formComponent2.form, "createTime", showTime(new Date()));
      });
    },
    // 导出操作
    onExport() {
      this.form.ids = this.ids.length ? this.ids : this.allIds;
      onExportApi(this.form).then(res => {
        common.downloadByBlob(res, `应急预案管理列表${new Date().getTime()}.xlsx`);
      });
    },
    // 跳转预案详情
    toYuAnDetail(id) {
      sessionStorage.setItem("id", JSON.stringify(id));
      this.$router.push({
        name: "PlanManagementDetail"
        // query: {
        //   id
        // }
      });
    },

    // 预览预案
    async preview(id) {
      const res = await getByIdApi({ id });
      if (res.accessoryId && res.accessoryId.length == 0) {
        this.$message({ type: "warning", message: "此条预案暂无附件" });
        return;
      }
      const { attachId, attachName } = res.accessoryId[0];
      this.common.pdfPreview(attachId, attachName);
      // 预览次数统计  0预览 1下载
      await getStatisticsApis({ id, type: 0 });
    },
    // 编辑预案管理
    HanEdit(id) {
      this.dialogConfig.isShow = true;
      console.log("row.id", id);
      getByIdApi({ id }).then(res => {
        // const { notificationId, warningNoticeName } = res;
        this.type = 1;
        this.fid = res.id;
        console.log(res);
        this.$set(this.add_form, "serialName", res.serialName);
        this.$set(this.add_form, "serialNum", res.serialNum);
        this.$set(this.add_form, "structureId", res.structureId);
        this.$set(this.add_form, "typeId", res.typeId);
        // this.$set(this.add_form, "preplanDepartmentId", res.preplanDepartmentId);
        this.$set(this.add_form, "releaseUnitName", res.releaseUnitName);
        this.$set(this.add_form, "approver", res.approver);
        this.$set(this.add_form, "releaseTime", res.releaseTime);
        this.$set(this.$refs.formComponent8.form, "releaseUnitName", res.releaseUnitName);
        this.$set(this.$refs.formComponent9.form, "preplanDepartmentName", res.preplanDepartmentName);
        // this.$set(this.add_form, "accessoryId", res.accessoryId);

        //  this.$set(this.$refs.formComponent1.form, "approveMaterials", res.approveMaterials);
        //  this.$set(this.$refs.formComponent1.form, "filingInfo", res.filingInfo);

        this.$set(this.$refs.formComponent2.form, "creator", res.creator);
        this.$set(this.$refs.formComponent2.form, "createDeptName", res.createDeptName);
        this.$set(this.$refs.formComponent2.form, "createTime", res.createTime);
        const list = res.accessoryId;
        const list1 = res.materialsId;
        const list2 = res.recordsInfoId;
        const newList = [];
        const newList1 = [];
        const newList2 = [];
        list.forEach(item => {
          newList.push({
            name: item.attachName,
            attachId: item.attachId
          });
        });
        list1.forEach(item => {
          newList1.push({
            name: item.attachName,
            attachId: item.attachId
          });
        });
        list2.forEach(item => {
          newList2.push({
            name: item.attachName,
            attachId: item.attachId
          });
        });
        console.log("list", newList);
        this.$set(this.upload_form, "fileList", newList);
        this.$set(this.upload_form, "fileList1", newList1);
        this.$set(this.upload_form, "fileList2", newList2);
      });


    },
    // 删除预案管理
    onDelPlan(id) {
      console.log("row.id", id);
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delApi({ id }).then(res => {
          this.$message({
            type: "success",
            message: `删除成功`
          });
          this.list();
        });
      });
    },
    // 弹窗关闭图标
    close() {
      this.dialogConfig.isShow = false;
      this.cancelBtn();
    },
    // 提交数据处理
    handleData() {
      this.$refs["formComponent"].validate((valid) => {
        this.flag = valid;
      });
      this.$refs["formComponent1"].validate((valid) => {
        this.flag1 = valid;
      });
      this.$refs.formComponent2.isValidate();

      const flag = this.flag;
      const flag1 = this.flag1;
      const flag2 = this.$refs.formComponent2.flag;
      console.log(flag1, "flag1");
      const deleteStatus = { deleteStatus: 0 };
      const list = this.upload_form.fileList;
      const list1 = this.upload_form.fileList1;
      const list2 = this.upload_form.fileList2;
      const newList = [];
      const newList1 = [];
      const newList2 = [];
      list.forEach(item => {
        newList.push(
          {
            attachName: item.name,
            attachId: item.attachId
          }
        );
      });
      list1.forEach(item => {
        newList1.push(
          {
            attachName: item.name,
            attachId: item.attachId
          }
        );
      });
      list2.forEach(item => {
        newList2.push(
          {
            attachName: item.name,
            attachId: item.attachId
          }
        );
      });
      const accessoryId = { accessoryId: newList };
      const materialsId = { materialsId: newList1 };
      const recordsInfoId = { recordsInfoId: newList2 };
      const releaseUnitName = { releaseUnitName: this.$refs.formComponent8.form.releaseUnitName };
      const preplanDepartmentName = { preplanDepartmentName: this.$refs.formComponent9.form.preplanDepartmentName };
      console.log("list", this.upload_form.fileList);
      console.log("accessoryId", accessoryId);
      console.log("formComponent8", this.$refs.formComponent8.form);

      const parmas = Object.assign({}, this.add_form, this.$refs.formComponent2.form, releaseUnitName, preplanDepartmentName, deleteStatus, accessoryId, materialsId, recordsInfoId);
      console.log("parmas", parmas);
      return {
        isValidate: flag && flag1 && flag2,
        parmas
      };
    },
    // 提交
    submitBtn() {
      this.saveBtn();
    },
    // 保存
    async saveBtn() {
      console.log("this.$refs.formComponent1", this.$refs.formComponent1);
      console.log("this.$refs.formComponent2", this.$refs.formComponent2);
      console.log("this.add_form", this.add_form);
      const { isValidate, parmas } = this.handleData();

      if (isValidate) {
        try {
          let message = "";
          if (this.type == 0) {
            await saveApi(parmas);
            message = "发布成功";
          } else {
            parmas.id = this.fid;
            await editApi(parmas);
            message = "编辑成功";
          }
          this.$message({
            message,
            type: "success"
          });
          this.list();
          this.cancelBtn();
        } catch (error) {
          console.error(error);
        }
      }
    },
    // 取消
    cancelBtn() {
      // this.$refs.upload.clearFiles();
      this.upload_form.fileList = [];
      this.upload_form.fileList1 = [];
      this.upload_form.fileList2 = [];
      this.$refs["formComponent"].resetFields();
      console.log(" this.$refs.formComponent.fileList", this.$refs.formComponent.fileList);
      this.$refs.formComponent2.form = this.$refs.formComponent2.$options.data().form;
      this.$nextTick(() => {
        console.log("this", this.$refs);
        this.$refs.formComponent.clearValidate();
        this.$refs.formComponent1.clearValidate();
        // this.$refs.formComponent1.$refs.formInlines.clearValidate();
        // this.$refs.formComponent2.$refs.formInlines.clearValidate();
      });

      this.dialogConfig.isShow = false;
    },
    upload(file) {
      return new Promise((resolve, reject) => {
        const params = {
          file: file,
          directoryId: 0,
          isNew: false,
          moduleName: "emergency"
        };
        UploadFile(this.common.convertFormData(params)).then(data => {
          resolve(data);
        }).catch(err => {
          reject(err);
        });
      });
    },
    upload1(file) {
      return new Promise((resolve, reject) => {
        const params = {
          file: file,
          directoryId: 1,
          isNew: false,
          moduleName: "emergency1"
        };
        UploadFile(this.common.convertFormData(params)).then(data => {
          resolve(data);
        }).catch(err => {
          reject(err);
        });
      });
    },
    upload2(file) {
      return new Promise((resolve, reject) => {
        const params = {
          file: file,
          directoryId: 2,
          isNew: false,
          moduleName: "emergency2"
        };
        UploadFile(this.common.convertFormData(params)).then(data => {
          resolve(data);
        }).catch(err => {
          reject(err);
        });
      });
    },
    // 上传附件
    handleBeforeUpload(file) {
      this.upload(file).then(data => {
        this.upload_form.fileList.push({ name: data.fileName, url: data.id, attachName: data.fileName, attachId: data.id });
      });
    },
    handleBeforeUpload1(file) {
      this.upload1(file).then(data => {
        this.upload_form.fileList1.push({ name: data.fileName, url: data.id, attachName: data.fileName, attachId: data.id });
      });
    },
    handleBeforeUpload2(file) {
      this.upload2(file).then(data => {
        this.upload_form.fileList2.push({ name: data.fileName, url: data.id, attachName: data.fileName, attachId: data.id });
      });
    },
    // 下载
    handlePreview(file) {
      console.log(file, "file");
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.6)"
      });
      loadFile({ id: file.attachId }).then(res => {
        const a = document.createElement("a");
        const objectUrl = URL.createObjectURL(res);
        a.setAttribute("href", objectUrl);
        a.setAttribute("download", file.name);
        a.click();
        loading.close();
      }).catch(() => {
        loading.close();
      });
    },
    // 移除附件
    handleRemove(file, fileList) {
      // this.upload_form.fileList = fileList;
      const result = this.upload_form.fileList;
      console.log("this.upload_form.fileList", this.upload_form.fileList);
      result.forEach((item, index) => {
        if (item.attachId === file.attachId) {
          this.upload_form.fileList = this.upload_form.fileList.splice(index, 0);
        }
      });
      console.log("this.upload_form.fileList", this.upload_form.fileList);

    },
    handleRemove1(file, fileList1) {
      const result1 = this.upload_form.fileList1;
      result1.forEach((item, index) => {
        if (item.attachId === file.attachId) {
          this.upload_form.fileList1 = this.upload_form.fileList1.splice(index, 0);
        }
      });
    },
    handleRemove2(file, fileList2) {
      const result2 = this.upload_form.fileList2;
      result2.forEach((item, index) => {
        if (item.attachId === file.attachId) {
          this.upload_form.fileList2 = this.upload_form.fileList2.splice(index, 0);
        }
      });
    }
  }
};
</script>
<style>
.el-table__body .el-table__row.hover-row td {
  background-color: transparent !important;
}
</style>
<style lang='less' scoped >
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.el-table) {
  .warning-row {
    background: #e6abab !important;
  }

  .success-row {
    background: #fff1b1 !important;
  }
}

:deep(.EmergencyList-dialog-form-item) {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.PlanManagement {
  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    font-size: 16px;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    font-size: 16px;
    color: #3270ff;
  }

  .box {
    // height: 80vh;
    // margin-top: 20px;
    // background-color: #fff;
    // border-radius: 4px;
    // padding: 10px;
    // box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    background-color: #fff;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;

    :deep(.el-form-item__label) {
      font-size: 16px;
      font-family: "Microsoft YaHei UI";
    }

    :deep(.el-button--small) {
      font-size: 16px;
    }

    :deep(.el-button--mini) {
      font-size: 16px;
    }
  }
}

.upload {
  :deep(.el-button) {
    padding: 9px 40px;
    font-size: 16px;
    text-decoration: underline;
    cursor: default;
  }

  :deep(.el-form-item) {
    margin-right: 0 !important;
  }
}

:deep(.el-input--small) {
  height: 36px;
  line-height: 36px;
  width: 380px !important;

  .el-input__inner {
    width: 100%;
  }
}

:deep(.el-form-item__label) {
  font-size: 16px;
  font-family: "Microsoft YaHei UI";
}

/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  font-size: 22px;
  position: relative;
  top: 6px;
}
</style>

